<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渡己 - 书签导航</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/components.css">
    <link rel="stylesheet" href="/css/footer.css">
    <link rel="stylesheet" href="/css/layout.css">
    <link rel="stylesheet" href="/css/navigation.css">

</head>
<body>
    <div class="background-image"></div>
    <div class="container">
        <header>
            <div class="logo">渡己</div>
            <div class="search-container">
                <input type="text" class="search-input" placeholder="搜索...">
                <button class="search-button">
                    <i class="bi bi-search"></i>
                </button>
            </div>
            <nav class="top-nav">
                <a href="#" class="nav-item">百度</a>
                <a href="#" class="nav-item">花瓣</a>
                <a href="#" class="nav-item">翻译</a>
                <a href="#" class="nav-item">图片</a>
                <a href="#" class="nav-item">创意</a>
                <a href="#" class="nav-item">设计</a>
                <a href="#" class="nav-item">电影</a>
                <a href="#" class="nav-item">icon</a>
                <a href="#" class="nav-item">淘宝</a>
            </nav>
        </header>

        <nav class="secondary-nav">
            <a href="#" class="nav-item"><i class="bi bi-clock-history"></i> 我的历史</a>
            <a href="#" class="nav-item"><i class="bi bi-calendar-event"></i> 周计划</a>
            <a href="#" class="nav-item"><i class="bi bi-rss"></i> RSS订阅</a>
            <a href="#" class="nav-item"><i class="bi bi-people"></i> 兰亭社区</a>
            <a href="#" class="nav-item"><i class="bi bi-lightning-charge"></i> 效率快捷键</a>
            <a href="#" class="nav-item"><i class="bi bi-pencil-square"></i> 自定义划面</a>
            <a href="#" class="nav-item"><i class="bi bi-grid-3x3-gap"></i> 每日划面</a>
            <?php if (isset($_SESSION['user_id'])): ?>
                <a href="index.php?action=admin" class="nav-item"><i class="bi bi-person"></i> 用户管理</a>
            <?php else: ?>
                <a href="index.php?action=login" class="nav-item"><i class="bi bi-person"></i> 登录</a>
            <?php endif; ?>
        </nav>

        <main>
            <?php foreach ($categories as $category): ?>
            <section class="bookmark-category">
                <h2><?php echo htmlspecialchars($category['category']); ?></h2>
                <div class="bookmark-grid">
                    <?php foreach ($bookmarks as $bookmark): 
                        if ($bookmark['category'] === $category['category']): ?>
                    <a href="<?php echo filter_var(htmlspecialchars($bookmark['url']), FILTER_VALIDATE_URL) ? htmlspecialchars($bookmark['url']) : '#'; ?>" class="bookmark-card" target="_blank">
                        <div class="bookmark-card-content">
                            <div class="bookmark-header">
                                <img src="<?php echo htmlspecialchars($bookmark['imgurl']); ?>" alt="<?php echo htmlspecialchars($bookmark['title']); ?>" class="bookmark-icon">
                                <h3><?php echo htmlspecialchars($bookmark['title']); ?></h3>
                            </div>
                            <p class="bookmark-description"><?php echo htmlspecialchars($bookmark['description']); ?></p>
                            </div>
                        </a>
                    <?php endif; endforeach; ?>
                </div>
            </section>
            <?php endforeach; ?>
        </main>
    </div>
    
    <script src="/js/main.js"></script>
</body>
</html>